<template>
    <div class="new-detail">
        <h3 class="new-title" v-html="data.title"></h3>
        <p class="new-time">日期：{{ data.time }}</p>
        <p class="new-source">来源：{{ data.src }}</p>
        <div class="new-content" v-html="data.content.replace(/\n/g, '<br>')"></div>
    </div>
</template>

<script>
import { defineComponent, ref } from '@vue/runtime-core'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
    setup() {
        const route = useRoute()
        const store = useStore()
        const data = ref({
            pic: 'https://p0.ssl.img.360kuai.com/t019e4fccc2595ff08c.jpg?size=960x567 ;https://p0.ssl.img.360kuai.com/t013fefca17c1cac4df.jpg?size=800x1088 ;https://p0.ssl.img.360kuai.com/t01ef0d3b4dac7164be.jpg?size=960x564 ;https://p0.ssl.img.360kuai.com/t0157972acaa2b0bbf9.jpg?size=800x1088 ;https://p0.ssl.img.360kuai.com/t019ddc3c9134bad484.jpg?size=800x1088 ;https://p0.ssl.img.360kuai.com/t01525f74d292d4a3c3.jpg?size=960x567 ',
            title: '美女校花唯美教室摆拍',
            time: '2021-07-24 09:10:00',
            src: '360资讯',
            content:
                '<b>美女</b>校花唯美教室摆拍 结语:当看破一切的时候,才知道,原来失去比拥有更踏实。有些东西,注定与你无缘,你再强求,最终都会离你而去。有些人,只能是你生命中的过客,你再留恋,到头来所有的期望终究成空。不属于你的,那就放下吧,大千世界,莽莽苍苍,我们能够拥有的毕竟有限,不要让无止...',
        })

        const { channel, index } = route.params
        const { searchResult, homepage } = store.state

		if (channel == 'search') {
			if (searchResult[index]) {
				data.value = searchResult[index]
			}
		} else {
			if (homepage[channel] && homepage[channel][index]) {
				data.value = homepage[channel][index]
			}
		}

        return {
            data,
        }
    },
})
</script>

<style scoped>
.new-detail {
	padding: 10px;
	line-height: 1.4;
}
.new-content {
	padding-top: 1em;
	margin-top: .5em;
	border-top: 1px solid #f0f1f4;
}
.new-content:deep(img) {
	max-width: 100%;
}
.new-title {
	padding: 10px 0;
}
.new-time,
.new-source {
	margin: .2em 0;
	font-size: .9em;
	color: #8891ab;
}
</style>
